import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import cart from '@/components/cart'
import notFound from '@/components/notFound'
import day0601 from '@/components/day0601'
import day0602 from '@/components/day0602'
import aaa from '@/components/aaa'
import bbb from '@/components/bbb'
import ccc from '@/components/ccc'
import product from '@/components/product'
import productList from '@/components/product-list'
// const Foo = () => import('./Foo.vue')
// 原来的方式：import productDetail  from '../components/product-detail'
const productDetail = () => import('../components/product-detail')
const ele = () => import('../components/element-ui')
const vant = () => import('../components/vant-ui')

Vue.use(Router)

export default new Router({
  // 路由模式，默认是hash
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/cart',
      name: 'cart',
      component: cart
    },
    {
      path: '/404',
      name: 'notFound',
      component: notFound
    },
    {
      path: '/day0601',
      name: 'day0601',
      component: day0601
    },
    {
      path: '/product/:sku',
      name: 'product',
      component: product
    },
    {
      path: '/productList',
      name: 'productList',
      component: productList
    },
    {
      path: '/productDetail/:id/:name/:price',
      name: 'productDetail',
      // alias?: string | Array<string>,
      alias: '/p',
      component: productDetail
    },
    // 路由的嵌套-大路由套着小路由
    {
      path: '/day0602',
      name: 'day0602',
      component: day0602,
      children:[
        {path: '/day0602/', component: aaa},
        {path: 'bbb', component: bbb},
        {
          path: 'ccc',
          component: ccc
        }
      ],
      // 路由独享前置守卫
      beforeEnter: ((to, from, next) => {
        console.log('路由独享前置守卫===============');
        console.log(to);
        console.log(from);
        console.log('路由独享前置守卫===============');
        next();
      })

    },
    {
      path: '/ele',
      name: 'ele',
      component: ele
    },
    {
      path: '/vant',
      name: 'vant',
      component: vant
    },
    {
      path: '*',
      redirect: '/404'
    }
  ]
})
